<!--
 * @Description: 文件描述
 * @Author: 1+
 * @Date: 2024-03-19 10:58:10
 * @LastEditors: 1+
 * @LastEditTime: 2024-08-28 19:43:05
-->
<template>
  <div>
    <el-button
      class="clear-btn"
      :disabled="!targetData.styles.animations.length"
      @click="clearAnimation"
    >
      清除动画
    </el-button>
    <el-row :gutter="6">
      <el-col v-for="(item, index) in animations" :key="index" :span="8">
        <div
          @click="addAnimation(item)"
          @mouseover="hoverPreviewAnimate = item.value"
          :class="[
            activeIndex(item.value) && 'active',
            hoverPreviewAnimate === item.value &&
              `animate__animated  animate__${item.value}`,
          ]"
          class="animation-item go-transition-quick"
        >
          {{ item.label }}
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import mixin from '../minxins'
import { animations } from '@/settings/animations'

export default {
  mixins: [mixin],
  data () {
    return {
      animations,
      hoverPreviewAnimate: '',
    }
  },
  methods: {
    // 选中的动画样式
    activeIndex (value) {
      const selectValue = this.targetData.styles.animations
      if (!selectValue.length) return false
      return selectValue[0] === value
    },
    // 新增动画
    addAnimation (item) {
      this.targetData.styles.animations = [item.value]
    },
    // 清除动画
    clearAnimation () {
      this.targetData.styles.animations = []
    }
  }
}
</script>

<style lang="scss" scoped>
.clear-btn {
  width: 100%;
  margin-bottom: 30px;
}
.animation-item {
  margin-bottom: 10px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: rgb(51, 54, 57);
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #e3e3e4;
  transition: all 0.2s;
  &:hover,
  &.active {
    color: #47e0c4;
    border: 1px solid #47e0c4;
  }
}
::v-deep .el-button:hover {
  border-color: #47e0c4;
  background-color: #fff;
}
</style>